<template>
  <view class="configPage">
    <!-- 首页 pageId == '1' -->
    <view class="container">
      <!-- 第一层child  -->
      <block v-for="(firstbannerItem, firstbannerIndex) in isCustomizeData.child" :key="firstbannerIndex">
        <!-- tagType == 'img' -->
        <image
          v-if="firstbannerItem.tagType == 'img'"
          :mode="firstbannerItem.mode ? firstbannerItem.mode : modeStyle"
          :src="firstbannerItem.src"
          :class="firstbannerItem.class"
          :style="firstbannerItem.style"
        ></image>
        <!-- tagType == 'a' -->
        <navigator
          v-if="firstbannerItem.tagType == 'a'"
          :url="firstbannerItem.href"
          :target="firstbannerItem.target"
          :style="firstbannerItem.style"
          :class="firstbannerItem.class"
          hover-class="none"
        >
          <!-- 第二层child -->
          <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
          <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
            <image
              v-if="secondbannerItem.tagType == 'img'"
              :mode="secondbannerItem.mode ? secondbannerItem.mode : modeStyle"
              :src="secondbannerItem.src"
              :class="secondbannerItem.class"
              :style="secondbannerItem.style"
            ></image>
            <h2 v-if="secondbannerItem.tagType == 'h2'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{ secondbannerItem.text }}</h2>
          </block>
        </navigator>
        <!-- tagType == 'div' -->
        <view
          @click="cmsClickHandle"
          :data-handle="firstbannerItem.onclick"
          :data-text="firstbannerItem.text"
          v-if="firstbannerItem.tagType == 'div'"
          :class="firstbannerItem.class"
          :style="firstbannerItem.style"
        >
          <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
          <!-- 第二层child -->
          <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
            <h2 v-if="secondbannerItem.tagType == 'h2'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{ secondbannerItem.text }}</h2>
            <p
              v-if="secondbannerItem.tagType == 'p'"
              @click="cmsClickHandle"
              :data-handle="secondbannerItem.onclick"
              :data-text="secondbannerItem.text"
              :style="secondbannerItem.style"
              :class="secondbannerItem.class"
            >
              {{ secondbannerItem.text }}
            </p>
            <label v-if="secondbannerItem.tagType == 'label'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{ secondbannerItem.text }}</label>
            <span
              v-if="secondbannerItem.tagType == 'span'"
              @click="cmsClickHandle"
              :data-handle="secondbannerItem.onclick"
              :data-text="secondbannerItem.text"
              :class="secondbannerItem.class"
              :style="secondbannerItem.style"
            >
              {{ secondbannerItem.text }}
            </span>
            <image
              v-if="secondbannerItem.tagType == 'img'"
              :mode="secondbannerItem.mode ? secondbannerItem.mode : modeStyle"
              :src="secondbannerItem.src"
              :class="secondbannerItem.class"
              :style="secondbannerItem.style"
            ></image>
            <!-- a和里面的child -->
            <navigator
              v-if="secondbannerItem.tagType == 'a'"
              :url="secondbannerItem.href"
              :target="secondbannerItem.target"
              :class="secondbannerItem.class"
              :style="secondbannerItem.style"
              hover-class="none"
            >
              <block>{{ secondbannerItem.text }}</block>
              <block v-for="(thirdbannerItem, thirdbannerIndex) in secondbannerItem.child" :key="thirdbannerIndex">
                <image
                  v-if="thirdbannerItem.tagType == 'img'"
                  :mode="thirdbannerItem.mode ? thirdbannerItem.mode : modeStyle"
                  :src="thirdbannerItem.src"
                  :class="thirdbannerItem.class"
                  :style="thirdbannerItem.style"
                ></image>
              </block>
            </navigator>
            <!-- 第三层child div里面的div-->
            <view
              v-if="secondbannerItem.tagType == 'div'"
              @click="cmsClickHandle"
              :data-handle="secondbannerItem.onclick"
              :data-text="secondbannerItem.text"
              :class="secondbannerItem.class"
              :style="secondbannerItem.style"
            >
              <block v-if="secondbannerItem.text">{{ secondbannerItem.text }}</block>
              <block v-for="(thirdbannerItem, thirdbannerIndex) in secondbannerItem.child" :key="thirdbannerIndex">
                <navigator
                  v-if="thirdbannerItem.tagType == 'a'"
                  :url="thirdbannerItem.href"
                  :target="thirdbannerItem.target"
                  :class="thirdbannerItem.class"
                  :style="thirdbannerItem.style"
                  hover-class="none"
                >
                  <block v-if="thirdbannerItem.text">{{ thirdbannerItem.text }}</block>

                  <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child" :key="fourthbannerIndex">
                    <image
                      v-if="fourthbannerItem.tagType == 'img'"
                      :mode="fourthbannerItem.mode ? fourthbannerItem.mode : modeStyle"
                      :src="fourthbannerItem.src"
                      :class="fourthbannerItem.class"
                      :style="fourthbannerItem.style"
                    ></image>
                  </block>
                </navigator>
                <h2 v-if="thirdbannerItem.tagType == 'h2'" :class="thirdbannerItem.class" :style="thirdbannerItem.style">{{ thirdbannerItem.text }}</h2>
                <p
                  v-if="thirdbannerItem.tagType == 'p'"
                  @click="cmsClickHandle"
                  :data-handle="thirdbannerItem.onclick"
                  :data-text="thirdbannerItem.text"
                  :style="thirdbannerItem.style"
                  :class="thirdbannerItem.class"
                >
                  {{ thirdbannerItem.text }}
                </p>
                <label v-if="thirdbannerItem.tagType == 'label'" :class="thirdbannerItem.class" :style="thirdbannerItem.style">{{ thirdbannerItem.text }}</label>
                <span
                  v-if="thirdbannerItem.tagType == 'span'"
                  @click="cmsClickHandle"
                  :data-handle="thirdbannerItem.onclick"
                  :data-text="thirdbannerItem.text"
                  :class="thirdbannerItem.class"
                  :style="thirdbannerItem.style"
                >
                  {{ thirdbannerItem.text }}
                </span>
                <image
                  v-if="thirdbannerItem.tagType == 'img'"
                  :mode="thirdbannerItem.mode ? thirdbannerItem.mode : modeStyle"
                  :src="thirdbannerItem.src"
                  :class="thirdbannerItem.class"
                  :style="thirdbannerItem.style"
                ></image>

                <!-- 第四层循环 tagType == 'div'-->
                <view v-if="thirdbannerItem.tagType == 'div'" :class="thirdbannerItem.class" :style="thirdbannerItem.style">
                  <block v-if="thirdbannerItem.text">{{ thirdbannerItem.text }}</block>
                  <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child" :key="fourthbannerIndex">
                    <navigator
                      v-if="fourthbannerItem.tagType == 'a'"
                      :url="fourthbannerItem.href"
                      :target="fourthbannerItem.target"
                      :class="fourthbannerItem.class"
                      :style="fourthbannerItem.style"
                      hover-class="none"
                    >
                      <block v-if="fourthbannerItem.text">{{ fourthbannerItem.text }}</block>

                      <block v-for="(fifthbannerItem, fifthbannerIndex) in fourthbannerItem.child" :key="fifthbannerIndex">
                        <image
                          v-if="fifthbannerItem.tagType == 'img'"
                          :mode="fifthbannerItem.mode ? fifthbannerItem.mode : modeStyle"
                          :src="fifthbannerItem.src"
                          :class="fifthbannerItem.class"
                          :style="fifthbannerItem.style"
                        ></image>
                      </block>
                    </navigator>
                    <h2 v-if="fourthbannerItem.tagType == 'h2'" :style="fourthbannerItem.style" :class="fourthbannerItem.class">{{ fourthbannerItem.text }}</h2>
                    <p v-if="fourthbannerItem.tagType == 'p'" :style="fourthbannerItem.style" :class="fourthbannerItem.class">{{ fourthbannerItem.text }}</p>
                    <!-- 第五层循环 tagType == 'div'-->
                    <view v-if="fourthbannerItem.tagType == 'div'" :class="fourthbannerItem.class" :style="fourthbannerItem.style">
                      <block v-if="fourthbannerItem.text">{{ fourthbannerItem.text }}</block>
                      <block v-for="(fifthbannerItem, fifthbannerIndex) in fourthbannerItem.child" :key="fifthbannerIndex">
                        <navigator
                          v-if="fifthbannerItem.tagType == 'a'"
                          :url="fifthbannerItem.href"
                          :target="fifthbannerItem.target"
                          :class="fifthbannerItem.class"
                          :style="fifthbannerItem.style"
                          hover-class="none"
                        >
                          <block v-if="fifthbannerItem.text">{{ fifthbannerItem.text }}</block>

                          <block v-for="(sixthbannerItem, sixthbannerIndex) in fifthbannerItem.child" :key="sixthbannerIndex">
                            <image
                              v-if="sixthbannerItem.tagType == 'img'"
                              :mode="sixthbannerItem.mode ? sixthbannerItem.mode : modeStyle"
                              :src="sixthbannerItem.src"
                              :class="sixthbannerItem.class"
                              :style="sixthbannerItem.style"
                            ></image>
                          </block>
                        </navigator>
                        <image
                          v-if="fifthbannerItem.tagType == 'img'"
                          :mode="fifthbannerItem.mode ? fifthbannerItem.mode : modeStyle"
                          :src="fifthbannerItem.src"
                          :class="fifthbannerItem.class"
                          :style="fifthbannerItem.style"
                        ></image>
                        <h2 v-if="fifthbannerItem.tagType == 'h2'" :style="fifthbannerItem.style" :class="fifthbannerItem.class">{{ fifthbannerItem.text }}</h2>
                        <p v-if="fifthbannerItem.tagType == 'p'" :style="fifthbannerItem.style" :class="fifthbannerItem.class">{{ fifthbannerItem.text }}</p>
                      </block>
                    </view>
                  </block>
                </view>
              </block>
            </view>
          </block>
        </view>

        <!-- tagType == 'h2' -->
        <view
          v-if="firstbannerItem.tagType == 'h2' || firstbannerItem.tagType == 'h1' || firstbannerItem.tagType == 'h3'"
          :class="firstbannerItem.class"
          :style="firstbannerItem.style"
        >
          <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
        </view>

        <!-- tagType == 'p' -->
        <view
          @click="cmsClickHandle"
          :data-handle="firstbannerItem.onclick"
          :data-text="firstbannerItem.text"
          v-if="firstbannerItem.tagType == 'p'"
          :class="firstbannerItem.class"
          :style="firstbannerItem.style"
        >
          <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
          <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
            <navigator
              v-if="secondbannerItem.tagType == 'a'"
              :url="secondbannerItem.href"
              :target="secondbannerItem.target"
              :class="secondbannerItem.class"
              :style="secondbannerItem.style"
              hover-class="none"
            >
              {{ secondbannerItem.text }}
            </navigator>
            <view v-if="secondbannerItem.tagType == 'strong'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{ secondbannerItem.text }}</view>
          </block>
        </view>
      </block>
    </view>
  </view>
</template>
<script>
import Vue from 'vue';
import api from '@/api/api';
import tip from '@/utils/tip';
import cmsItems from '@/utils/cmsItems';
import customize from '@/utils/customize';
import { SEL_CLASS_CODE, SEL_ACTIVE_CODE, SYSTEM_INFO, CUSTOMER_INFO, CART_KEY, MERCHANT_INFO, USER_INFO, USER_SPECICAL_INFO } from '@/utils/constant';
export default {
  config: {
    component: true
  },
  props: {
    isCustomizeData: Object,
    isAppend: Number,
    isIpx: Boolean,
    currentPagePath: String
  },

  data() {
    return {
      modeStyle: 'widthFix',
      merchantInfo: {},
      merchantId: '',
      storeId: '',
      pageId: '',
      windowHeight: 0, // 屏幕高度
      windowWidth: 0,
      swpierHeight: '',
      videoStyle: '',
      jumpHandleNames:['jump_a','jump_b','jump_c'],
    };
  },

  mounted() {
    uni.setStorageSync(SEL_CLASS_CODE, '');
    uni.setStorageSync(SEL_ACTIVE_CODE, -1);
  },

  created: async function(option) {
    let that = this;
    let systemInfo = uni.getStorageSync(SYSTEM_INFO);
    that.windowHeight = systemInfo.windowHeight;
    that.windowWidth = systemInfo.windowWidth;
    that.videoStyle = 'height:' + that.windowWidth + 'px' + ';' + 'width:' + that.windowWidth + 'px';
    that.swpierHeight = 'height:' + systemInfo.windowHeight + 'rpx';
  },

  watch: {},

  methods: {
    // cms组件点击事件
    cmsClickHandle(e) {
      let handleName = e.target.dataset.handle || '';
      let text = e.target.dataset.text || '';
      if (!handleName) {
        return;
      }
      
      this.$EFSTracking.trackingAction('CLICK_CMS',JSON.stringify({"handleName":handleName,"text":text}),{});
      
      // 锚点链接
      if(this.jumpHandleNames.indexOf(handleName) !== -1){
      	const query = uni.createSelectorQuery().in(this);
      	  query.select('#'+ handleName).boundingClientRect()
      	  query.selectViewport().scrollOffset()
      	  query.exec(function(res) {
      	    uni.pageScrollTo({
      	      scrollTop: res[0].top + res[1].scrollTop -60,
      	      duration: 500
      	    });
      	  })
      }

    }
  }
};
</script>

<style lang="less" scoped>
image {
  height: auto;
}
.categoryTitle {
  text-align: center;
  font-size: 36rpx;
  margin-bottom: 30rpx;
}
</style>
